<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #cccccc;
    }
</style>
<body>
<div class="box">
    
</div>

<script>
//修改元素的样式 需要拿到对象的style属性对象 对style属性对象中的属性进行修改
const box = document.querySelector('.box');
box.style.width = '500px'
box.style.border = '12px solid blue'
box.style.backgroundColor = 'yellow'  //带 - 符号的属性 一律用驼峰命名法书写
</script>
</body>
</html>